<template>
    <div>
        <setHeader title="产品管理"></setHeader>
        <div class="content">
            <div v-if="hostlist == ''" class="contentEmpty" style="margin-top: .2rem;margin-bottom: 0.8rem;">
                <img src="../common/images/Disappointment.png" alt="">
                <em>暂无查询结果</em>
            </div>
            <div class="main-product_manage" v-else>
                <!-- <div class="emptyProduct" v-if="hostlist == ''" style="margin-top:0.6rem;">
                    <img src="../common/images/empty.png" alt="">
                    <p>暂无数据  ╮(￣▽￣)╭</p>
                </div> -->
                <ul>
                    <li v-for="(host, h) in hostlist" :key="h" @click="jumpClick(host.IDProduct)" style="margin-left: 0;">
                    <a href="javascript:void(0)">
                        <img :src="host.smallImg" alt="" />
                        <span class="host_name">{{host.chrName}}</span>
                        <span class="host_num">￥{{host.Price}}</span>
                    </a>
                    </li>
                    <!-- <li class="add_active_manage" @click="imginsertClick" v-if="t_show">
                        <i class="iconfont icon-jia"></i>
                    </li> -->
                </ul>
            </div>
            <!-- 添加 -->
            <div class="add_active_manage" @click="imginsertClick" v-if="t_show">
                <i class="iconfont icon-jia"></i>
            </div>
        </div>
        <so-footer></so-footer>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import soFooter from '../components/footer-bar';
    export default {
        data() {
            return {
                hostlist: [],
                // path:"http://fc.x.e000.com",
                u_type:'',
                t_show:true,
                userInfo:'',
                /*hostlist: [
                    { 
                        link: '',
                        hostName: '灰色纱布懒人沙发',
                        hostNum: '￥388'
                    },
                    { 
                        link: '',
                        hostName: '原木色镀金筷子',
                        hostNum: '￥388'
                    },
                    { 
                        link: '',
                        hostName: '轻柔抽纸纸巾包装',
                        hostNum: '￥388'
                    },
                    { 
                        link: '',
                        hostName: '轻柔抽纸纸巾包装',
                        hostNum: '￥388'
                    },
                ],*/
                cpId: ''
            }
        },
        mounted() {
            this.cpId = this.$route.query.cp_id; 
            this.u_type = this.$route.query.u_type;
            this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            if(this.u_type == 1){
                this.t_show = true;
            }else{
                this.t_show = false;
            }
            this.productlist();
        },
        methods: {
            productlist() {
                let c_id = this.$route.query.cp_id;
                let userId = this.userInfo.uid;
                this.$fetch(this.$path + '/index.php/api/ProductList', {c_id,userId}).then((response) => {
                    console.log('产品列表', response);
                    if(response.code == 200) {
                        this.hostlist = response.data;
                        response.data.forEach(item => {
                            // this.Title = item.Title;
                            // this.dtCreate = item.dtCreate;
                        });
                    }
                })
            },
            jumpClick(id) {
                if(this.u_type ==1){
                    this.$router.push({
                        path: '/userCenter/productEditor',
                        query: {id: id}
                    })
                }else{
                    this.$router.push({
                        path: '/productDetail',
                        query: {id: id}
                    })
                }
                
            },
            imginsertClick() {
                if(this.cpId == undefined){
                    this.$router.push({
                        path: '/userCenter/productInsert',
                        query: {cpId: 0}
                    })
                }else{
                    this.$router.push({
                        path: '/userCenter/productInsert',
                        query: {cpId: this.cpId}
                    })
                }
                
            },
            // goback(cpId) {
            //     this.$router.push({
            //         path: '/userCenter/companyData',
            //         query: {cpId: this.cpId}
            //     })
            // }
        },
        components: {
            setHeader,
            soFooter
        }
    }
</script>

<style>
.main-product_manage {
    padding-top: 0.2rem;
}
.main-product_manage ul {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.main-product_manage ul>li {
    text-align: center;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 0.3rem;
    text-align: center;
    vertical-align: middle;
}
.main-product_manage img {
    max-width: 100%;
    max-height: 100%;
    width: 2rem;
    height: 2rem;
}
.main-product_manage a .host_name {
    font-size: 0.28rem;
    color: #333;
    width: 2.5rem;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    padding-left: 0.2rem;
    background-color: transparent;
    margin: 0;
    border-radius: 100%;
    line-height: 0.36rem;
    height: 0.36rem;
}
.main-product_manage .host_num {
    font-size: 0.24rem;
    color: #e50838;
    text-align: left;
    display: block;
    padding-left: 0.2rem;
    margin: 0;
    background-color: transparent;
}
/* 添加 */
.add_active_manage {
    width: 1rem;
    height: 1rem;
    background-color: #e50838 !important;
    border-radius: 50%;
    margin-bottom: 0.4rem;
    /* margin: 0.7rem; */
    margin: 0 auto;
}
.add_active_manage .icon-jia {
    font-size: 0.48rem;
    line-height: 1rem;
    vertical-align: text-top;
    text-align: center;
    color: #fff;
}

/* 产品为空 */
.main-product_manage .emptyProduct {
  padding: 0 0 0.2rem;
  box-sizing: border-box;
}
.main-product_manage .emptyProduct img {
  width: 1.56rem;
  height: 1.22rem;
  margin: 0 auto;
}
.main-product_manage .emptyProduct p {
  font-size: 0.26rem;
  color: #999;
  text-align: center;
}

</style>